<template>
  <div class="abandon-info-wrap">
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      label-width="90px"
      class="abandon-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="审批单号：" prop="examineId" style="margin-bottom: 0px;">
            <div>{{ detailInfo.examineId || '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间：" prop="createDate" style="margin-bottom: 0px;">
            <span v-if="detailInfo.createDate">{{ detailInfo.createDate | format('YYYY-MM-DD') }}</span>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人：" prop="creator" style="margin-bottom: 0px;">
            <CheckUserInfo v-if="detailInfo.creator" :label="detailInfo.creator" :user-id="detailInfo.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门：" prop="departmentName" style="margin-bottom: 0px;">
            <div>{{ detailInfo.departmentName || '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人：" prop="proposer" style="margin-bottom: 0px;">
            <CheckUserInfo v-if="detailInfo.proposer" :label="detailInfo.proposer" :user-id="detailInfo.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请部门：" prop="deptName" style="margin-bottom: 0px;">
            <div>{{ detailInfo.deptName || '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作废说明：" prop="abandonRemark" style="margin-bottom: 0px;">
            <div>{{ detailInfo.abandonRemark || '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件：" prop="attachment" style="margin-bottom: 0px;">
            <div class="ellipsis">
              <FileShowList v-if="detailInfo.attachment && detailInfo.attachment.length" :file-list="detailInfo.attachment" style="max-width:100%;" is-show-single-file />
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { format } from '@/filters/date';
import FileShowList from '@/components/CreateOrder/fileShowList';
import { mapState } from 'vuex';

export default {
  filters: { format },
  components: { FileShowList },
  props: {
    detailInfo: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  }
};
</script>

<style lang="scss" scoped>
.abandon-info-wrap{
  .abandon-form {
    & ::v-deep {
      .el-form-item {
          .el-form-item__label {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999 !important;
            opacity: 1;
            line-height: 30px;
          }
        }
        .el-form-item__content {
          font-size: 14px;
          font-family: PingFang SC;
          line-height: 30px;
          font-weight: 400;
          color: #333333;
          opacity: 1;
        }
    }
  }
  .dividing{
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>
